<template>
	<view class="homebox">
		<image class="headertopimg" src="../../static/home/图层 1@3x.png" mode=""></image>
		<view class="headertitle">
			<span>麻醉风险医疗意外保障计划</span>
			<image src="../../static/home/中国平安@3x.png" mode=""></image>
		</view>
		<view class="headertitle">
			<view class="headertitleinfo">
				产品备案信息: 中国平安财产保险股份有限公司平安产险手术无忧 意外伤害保险条款。本产品的销售与协助索赔等保险服务由升华茂林保险销售服务有限公司提供。
			</view>
		</view>
		<view class="headeribfotext">
			<u-row gutter="12">
				<u-col span="4">
					<view class="titletext">
						<image class="titleimg" src="../../static/home/警告@3x.png" mode=""></image><span>急诊手术、紧急手术</span>
					</view>
				</u-col>
				<u-col span="4">
					<view class="titletext">
						<image class="titleimg" src="../../static/home/警告@3x.png" mode=""></image>
						<span>ICU患者、危重患者</span>
					</view>
				</u-col>
				<u-col span="4">
					<view class="titletext">
						<image class="titleimg" src="../../static/home/警告@3x.png" mode=""></image><span>年龄大于75周岁</span>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="headertitle">
			<span>保险方案</span>
			<span style="float: right;color: #0A6FD8; font-size: 22rpx;line-height: 50rpx;">更多对比</span>
		</view>
		<view class="centerPrice">
			<view class="centerPriceimage">
				<view class="centerPriceimagetop">
					<view class="centerPriceimagetopbutton">
						标准版
					</view>
					<view class="centerPriceimagetopprice">
						80元<span style="font-size: 25rpx;margin-left: 10rpx;"> 起</span>
					</view>
				</view>
				<view class="centerPriceimagetoptitle">
					最低保障费用80元
				</view>
				<view class="centerPriceimagetoptitle">
					并发症医疗津贴保证金
				</view>
			</view>
			<view class="centerPriceimage1">
				<view class="centerPriceimagetop centerPriceimage1top">
					<view class="centerPriceimagetopprice centerPriceimage1topprice">
						160元<span style="font-size: 25rpx;margin-left: 10rpx;"> 起</span>
					</view>
					<view class="centerPriceimagetopbutton centerPriceimage1topbutton">
						加强版
					</view>
				</view>
				<view class="centerPriceimagetoptitle centerPriceimage1toptitle">
					最低保障费用80元
				</view>
				<view class="centerPriceimagetoptitle centerPriceimage1toptitle">
					并发症医疗津贴保证金
				</view>
			</view>
		</view>
		<u-gap height="5" bg-color="#F6F6F6"></u-gap>
		<view class="headertabs">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<u-gap height="1" bg-color="#EBEBEB"></u-gap>
		<view class="headerdetails">
			<view id="section1" class="headertitle">
				<span>产品特色</span>
			</view>
			<image class="headerdetailsimage" src="../../static/home/图层 3@3x.png" mode=""></image>
			<u-gap height="5" bg-color="#F6F6F6"></u-gap>
			<view id="section2" class="headertitle1">
				<span>理赔流程</span>
			</view>
			<view class="settlementofclaim">
				<view class="">
					在线理赔申请 理赔指南
				</view>
			</view>
			<view class="flowPath">
				<view class="flowPathLeft">
					<image class="flowPathLeftimage" src="../../static/home/椭圆 3@3x.png" mode=""></image>
					<image class="flowPathLeftimage1" src="../../static/home/形状 1@3x.png" mode=""></image>
					<image class="flowPathLeftimage" src="../../static/home/椭圆 3@3x.png" mode=""></image>
					<image class="flowPathLeftimage1" src="../../static/home/形状 1@3x.png" mode=""></image>
					<image class="flowPathLeftimage" src="../../static/home/椭圆 3@3x.png" mode=""></image>
					<image class="flowPathLeftimage1" src="../../static/home/形状 1@3x.png" mode=""></image>
					<image class="flowPathLeftimage" src="../../static/home/椭圆 3@3x.png" mode=""></image>
				</view>
				<view class="flowPathRight">
					<view class="flowPathRightbox">
						<view class="flowPathRightboxtitle">1、报案</view>
						<view class="flowPathRightboxtext">
							保险事故发生后，请您第一时间联系所在医院服务人员服 务人员会尽力为您提供咨询、协助等帮助，您也可拨打( 平安财险] 服务热线 (95511转5)进行报案。
						</view>
					</view>
					<view class="flowPathRightbox">
						<view class="flowPathRightboxtitle">2、提交申请材料</view>
						<view class="flowPathRightboxtext">
							请您按照服务人员的指引或保险条款有关约定，搜集齐全 理赔申请所需的有关证明和材料，并提交索赔申请材料。
						</view>
					</view>
					<view class="flowPathRightbox">
						<view class="flowPathRightboxtitle">3、理赔审核</view>
						<view class="flowPathRightboxtext">
							收到您的理赔申请材料后，保险公司将根据保险合同客观、 公正审核。审核完成后,会通过短信等方式通知您审核结果。
						</view>
					</view>
					<view class="flowPathRightbox">
						<view class="flowPathRightboxtitle">4、支付保险金</view>
						<view class="flowPathRightboxtext">
							确定案件属于保险责任，在结案或达成给付协议后，保险 公司将在3-10个工作日内支付保险金。
						</view>
					</view>
				</view>
			</view>
			<u-gap height="5" bg-color="#F6F6F6"></u-gap>
			<view id="section3" class="headertitle">
				<span>常见问题</span>
				<span style="float: right;color: #0A6FD8; font-size: 22rpx;line-height: 50rpx;">查看更多</span>
			</view>
			<view class="problembox">
				<view class="problemboxtitle">
					<view class="problemboxtitleimg">Q1</view>
					<view class="problemboxtitletext">为什么没有零风险的手术</view>
				</view>
				<view class="problemboxbg">
					手术本身是一种以主动侵害身体为代价的创伤性治疗 手术本身是一种以主动侵害身体为代价
				</view>
			</view>
			<view class="problembox">
				<view class="problemboxtitle">
					<view class="problemboxtitleimg">Q2</view>
					<view class="problemboxtitletext">为什么没有零风险的手术</view>
				</view>
				<view class="problemboxbg">
					手术本身是一种以主动侵害身体为代价的创伤性治疗 手术本身是一种以主动侵害身体为代价
				</view>
			</view>
			<view class="selectbox">
				<view class="selectboxleft">
					<u-radio-group v-model="value">
						<u-radio shape="square" active-color="#005CAB">
						</u-radio>
					</u-radio-group>
				</view>
				<view class="selectboxright">
					我已阅读并同意<span>《保险条款》《责任免除》《特别告知》《投保须知 》《产品说明书》《个人信息授权书》《投保提示书》《投保场景隐私政策》</span> 及以上告知内容
				</view>
			</view>
			<view class="settlementbox">
				<view class="settlementimg">
						<image class="" src="../../static/home/图层 7@3x.png" mode=""></image>
				</view>
				
				<view class="settlementpri">
					¥80  <span>起</span>
				</view>
				<view class="settlementbut">
					立即投保
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					name: '产品特色'
				}, {
					name: '理赔流程'
				}, {
					name: '常见问题',
					count: 5
				}],
				current: 0,
				value: '',
			};
		},
		methods: {
			change(index) {
				console.log(index.index);
				this.current = index.index;
				if (index.index == 0) {
					uni.pageScrollTo({
						selector: '#section1',
						duration: 300 // 滚动动画时长
					});
				} else if (index.index == 1) {
					uni.pageScrollTo({
						selector: '#section2',
						duration: 300 // 滚动动画时长
					});
				} else {
					uni.pageScrollTo({
						selector: '#section3',
						duration: 300 // 滚动动画时长
					});
				}
			}
		}
	};
</script>
<style>
	.homebox {
		width: 100%;
		overflow: hidden;
	}

	.headertopimg {
		width: 100%;
		height: 488rpx;
	}

	.headertitle {
		padding: 4%;
		width: 92%;
	}

	.headertitle span {
		font-size: 31.4rpx;
		color: #333;
		float: left;
	}

	.headertitle image {
		width: 87rpx;
		height: 35rpx;
		float: right;
	}

	.headertitleinfo {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24.5rpx;
		color: #999999;
		line-height: 33rpx;
	}

	.titleimg {
		width: 25.5rpx;
		height: 25.5rpx;
		margin-right: 10rpx;
		/* margin-top: 15rpx; */
	}

	.titletext {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 21rpx;
		color: #333333;
		line-height: 50rpx;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.headeribfotext {
		width: 100%;
		height: 50rpx;
		background: #F6F6F6;
	}

	.u-row {
		padding: 0 4%;
	}

	.centerPrice {
		width: 100%;
		position: relative;
		height: 190rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.centerPriceimage {
		width: 47%;
		height: 130rpx;
		position: absolute;
		left: 4%;
		top: 0;
		z-index: 2;
		background-image: url('../../static/home/矩形 11@3x.png');
		background-size: 100% 100%;
		padding: 30rpx 4%;
	}

	.centerPriceimage1 {
		width: 44%;
		height: 120rpx;
		position: absolute;
		right: 4%;
		bottom: 0;
		z-index: 1;
		background-image: url('../../static/home/矩形 12@3x.png');
		background-size: 100% 100%;
		padding: 20rpx 3%;
	}

	.centerPriceimagetop {
		margin-bottom: 20rpx;
	}

	.centerPriceimagetopbutton {
		text-align: center;
		width: 129rpx;
		height: 46rpx;
		line-height: 46rpx;
		border-radius: 23rpx;
		background: #fff;
		color: #006AD3;
		font-size: 28rpx;
		display: inline-block;
		font-weight: bold;
	}

	.centerPriceimagetopprice {
		display: inline-block;
		line-height: 46rpx;
		color: #fff;
		margin-left: 30rpx;
		font-size: 31rpx;
		line-height: 46rpx;
		font-weight: bold;
	}

	.centerPriceimagetoptitle {
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 33rpx;
	}

	.centerPriceimage1top {
		float: right;
	}

	.centerPriceimage1topprice {
		color: #0A6FD8;
		margin-right: 20rpx;
		font-size: 31rpx;
	}

	.centerPriceimage1topbutton {
		width: 116rpx;
		height: 41rpx;
		background: #0A6FD8;
		border-radius: 21rpx;
		line-height: 41rpx;
		color: #fff;
		font-size: 25rpx;
	}

	.centerPriceimage1toptitle {
		float: right;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 21rpx;
		color: #0A6FD8;
		line-height: 29rpx;
	}

	.headertabs {
		width: 100%;
		display: flex;
		/* 如果需要，可以使用flex布局 */
		justify-content: center;
		/* 如果需要居中对齐 */
	}

	.u-tabs {
		width: 100%;
	}

	.headertabs /deep/.u-tabs__wrapper__nav__item {
		width: 27.5%;
	}

	.headerdetailsimage {
		width: 100%;
		height: 1850rpx;
	}

	.settlementofclaim {
		width: 92%;
		height: 206rpx;
		background-image: url('../../static/home/组.png');
		background-size: 100% 100%;
		line-height: 220rpx;
		margin-left: 4%;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 29rpx;
		color: #FFFFFF;
		text-indent: 35rpx;
	}

	.headertitle1 {
		height: 0rpx;
		padding: 0 4%;
		width: 92%;
		margin-top: 30rpx;
	}

	.flowPath {
		width: 92%;
		padding: 0 4%;
		height: 800rpx;
	}

	.flowPathLeft {
		margin-left: 20rpx;
		margin-top: 20rpx;
		float: left;
	}

	.flowPathLeftimage {
		width: 21rpx;
		height: 21rpx;
		display: block;
	}

	.flowPathLeftimage1 {
		width: 4.6rpx;
		height: 150.8rpx;
		display: block;
		margin-left: 8.5rpx;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
	}

	.flowPathRight {
		float: right;
		margin-right: 20rpx;
	}

	.flowPathRightbox {
		width: 544rpx;
		background: #F9F9F9;
		border-radius: 25rpx;
		padding: 25rpx;
		margin-bottom: 20rpx;
	}

	.flowPathRightboxtitle {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 34rpx;
		color: #006AD3;
		line-height: 33rpx;
		margin-bottom: 20rpx;
	}

	.flowPathRightboxtext {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #666666;
		line-height: 27rpx;
	}

	.problembox {
		width: 84%;
		margin-left: 4%;
		height: 221rpx;
		background-image: url('../../static/home/矩形 19@3x.png');
		background-size: 100% 100%;
		margin-top: 40rpx;
		padding: 4%;
		margin-bottom: 0rpx;
	}

	.problemboxtitleimg {
		width: 53rpx;
		height: 48rpx;
		background-image: url('../../static/home/矩形 20@3x.png');
		background-size: 100% 100%;
		color: #fff;
		text-align: center;
		line-height: 48rpx;
		font-size: 28rpx;
		display: inline-block;
		font-weight: bold;
	}

	.problemboxtitletext {
		display: inline-block;
		margin-left: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		line-height: 33rpx;
	}

	.problemboxbg {
		width: 92%;
		padding: 4%;
		background: #F9FAFC;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 25rpx;
		color: #666666;
		line-height: 38rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
	}

	.selectbox {
		width: 92%;
		padding: 4%;
		height: 100rpx;
	}
	.selectboxleft{
		width: 8%;
		float: left;
	}
	.selectboxright{
		width: 92%;
		float: right;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #666666;
		line-height: 30rpx;
	}
	.selectboxright span{
		color: #005CAB;
	}
	.settlementbox{
		width: 92%;
		margin-left: 4%;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		height: 100rpx;
	}
	.settlementimg{
		display: inline-block;
		float: left;
		width: 79.5rpx;
		height: 69rpx;
		margin-top: 10rpx;
	}
	.settlementimg image{
		width: 100%;
		height: 100%;
	}
	.settlementpri{
		float: left;
		display: inline-block;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 37rpx;
		line-height: 65rpx;
		color: #F86E13;
		margin-left: 30rpx;
		margin-top: 20rpx;
	}
	.settlementpri span{
		color: #333;
		font-size: 32rpx;
		margin-left: 15rpx;
	}
	.settlementbut{
		display: inline-block;
		float: right;
		width: 280rpx;
		height: 90rpx;
		background: #005CAB;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 31rpx;
		color: #FFFFFF;
		line-height: 90rpx;
		border-radius: 50rpx;
	}
</style>